<template>
	<view class="gym">
		<!-- 页面 header 相关部分 -->
		<view class="header-box">
			<!-- 顶部广告位轮播图 -->
			<u-swiper :list="bannerList" indicator indicatorMode="line" circular height="180"></u-swiper>
		</view>
		<!-- 页面健身房列表 -->
		<view class="gym-mod">
			<text class="rtxt">推荐健身房</text>
			<view v-for="item in gymList" :key="item.id">
				<navigator class="one-new" open-type="navigate" :url="'/subpages/gymDetail/gymDetail?id=' + item.id"
					hover-class="none">
					<view class="left">
						<view class="title u-line-2">{{item.gymName}}</view>
						<view>
							<!-- 星级评分 count是最大分值，item.star是具体分数 -->
							<u-rate :count="5" v-model="item.star"></u-rate>
						</view>
						<view class="uinfo">
							<view class="iview">
								<!-- 健身房地址 -->
								<view class="utime">
									<text class="name u-line-1">{{ item.address }}</text>
								</view>
							</view>
							<!-- 健身房创建时间 -->
							<text class="uptime">{{ item.createTime  }}</text>
						</view>
					</view>
					<!-- 健身房图片 -->
					<view class="right">
						<image class="pic" mode="aspectFill" :src="item.img" />
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import { gymList } from '@/config/api.js'
	export default {
		data() {
			return {
				bannerList: [
					'https://picnew12.photophoto.cn/20180919/shishangyundongneiyiquanpinglunbohaibao-30686357_1.jpg',
					'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F9713cb6639f07ce60dd1b828a46dd57015d6e23b1616ae-oQgDVS_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650871658&t=a6194b7ca9fd28f24aa0405eeeee4cbb',
					'https://hbimg.huabanimg.com/e7930470909b384cae4fb90b43c144ca244162854a18-npb6iP_fw658/format/webp',
				],
				pageSize: 999,
				gymList: {}
				// newsList: [{
				// 	id: 0,
				// 	title: '1234',
				// 	author: '1234',
				// 	created_at: '1234',
				// 	cover: 'https://picnew12.photophoto.cn/20180919/shishangyundongneiyiquanpinglunbohaibao-30686357_1.jpg',
				// }]

			}
		},
		onLoad() {
			this.loadGyms(this.pageSize)
		},
		//下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.loadGyms(this.pageSize)
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			// 加载健身房数据
			async loadGyms(pageSize) {
				const { rows: data } = await gymList(1,pageSize)
				this.gymList = data
				console.log(this.gymList)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.gym {
		background-color: #f9f9f9;

		.header-box {
			padding: 20rpx 30rpx
		}

		.gym-mod {
			background-color: #fff;
			width: 750upx;

			.rtxt {
				margin: 10rpx 0 0 30rpx;
				font-weight: bold;
				color: #000;
			}

			.one-new {
				width: 700upx;
				height: 74px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-around;
				align-items: flex-start;
				align-content: center;
				padding-bottom: 10px;
				padding-top: 10px;
				padding-left: 25upx;
				padding-right: 25upx;
				border-bottom: 1px solid #f1f1f1;

				.left {
					width: 490upx;
					height: 140upx;
					text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;

					.title {
						font-size: 30upx;
						line-height: 42upx;
						color: #001432;
						margin-top: 21upx;
					}

					.uinfo {
						width: 490upx;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: space-between;
						align-items: center;
						align-content: center;
						margin-top: 6upx;
						font-size: 20upx;
						color: #999;

						.utime {
							font-size: 24upx;

							.name {
								max-width: 260rpx;
								color: #777;
							}
						}
					}
				}

				.right {
					width: 120upx;

					.pic {
						width: 120upx;
						height: 120upx;
						margin-top: 20upx;
						border-radius: 6upx;
					}
				}
			}

		}

	}
</style>
